<template>
  <div class="app-container">
    <div class="goodsInfo">
      <div class="left" style="width: 60%;">
        <el-form
          ref="form"
          :model="queryParams"
          label-suffix=":"
          label-width="100px"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item
                prop="siCode"
                :label="$t('outboundOrderLang.siCode')"
              >
                <el-input
                  ref="inputSiCode"
                  v-model.lazy="queryParams.siCode"
                  :placeholder="
                    $t('pleaseScan') + $t('outboundOrderLang.siCode')
                  "
                  style="width: 100%"
                  @keyup.enter.native.prevent="getSiCode"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-table :data="queryParams.scanList" border :row-style="rowStyle" @row-click="rowClick">
            <el-table-column
              :label="$t('tableIndex')"
              type="index"
              align="center"
              width="55"
              size="mini"
            />
            <el-table-column
              prop="orderNo"
              align="center"
              :label="$t('goodsSKULang.warehouseOutDocNo')"
              min-width="160"
            />
            <el-table-column
              prop="providerTrackingNo"
              align="center"
              :label="$t('outboundOrderLang.providerNo')"
              min-width="130"
            />
            <el-table-column
              prop="skuNum"
              align="center"
              :label="$t('goodsSKULang.skuTotalNum')"
              min-width="80"
            />
            <el-table-column
              prop="orderVoteTypeName"
              align="center"
              :label="$t('outboundOrderLang.orderVoteType')"
              min-width="80"
            />
            <el-table-column
              :label="$t('goodsSKULang.pickStatus')"
              prop="pickingStatus"
              align="center"
              min-width="80"
            >
              <template v-slot="{ row }">
                <div :class="row.pickingStatus === 'Y' ? 'active' : ''">
                  <span>{{ row.pickingStatus }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('outboundOrderLang.label')"
              prop="orderStatus"
              align="center"
              min-width="80"
            >
              <template v-slot="{ row }">
                <div :class="row.orderStatus === 80 ? 'active' : ''">
                  <span>{{ row.orderStatus === 80 ? '问题件' : 'N' }}</span>
                </div>
              </template>
            </el-table-column>
          </el-table>

        </el-form>

      </div>
      <div class="right" style="width: calc(40% - 10px); margin-left: 10px;">
        <el-form
          ref="form"
          :model="queryParams"
          label-suffix=":"
          label-width="100px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item prop="skuCode" :label="$t('goodsSKULang.skuCode')">
                <el-input
                  ref="skuCode"
                  v-model.lazy="queryParams.skuCode"
                  :placeholder="$t('pleaseScan') + $t('goodsSKULang.skuCode')"
                  :disabled="skuDisabled"
                  style="width: 50%"
                  @keyup.enter.native="getSkuCodeInfo"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-table :data="queryParams.skuList" border style="width: 500px;">
            <el-table-column
              :label="$t('tableIndex')"
              type="index"
              align="center"
              width="55"
              size="mini"
            />
            <el-table-column
              prop="skuCode"
              align="center"
              label="sku"
              min-width="120"
            />
            <el-table-column
              prop="goodsNum"
              align="center"
              :label="$t('goodsSKULang.outboundQty')"
              min-width="100"
            /><!--
            <el-table-column
              prop="goodsPickingNum"
              align="center"
              :label="$t('goodsSKULang.pickQty')"
              min-width="80"
            />-->
            <el-table-column
              prop="scanQty"
              align="center"
              :label="$t('goodsSKULang.scanQty')"
              min-width="100"
            />
          </el-table>
          <el-descriptions class="margin-top" :column="1" style="margin-top: 10px;">
            <el-descriptions-item :label="$t('outboundOrderLang.orderVoteType')">
              {{ goodsList.orderVoteType }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('outboundOrderLang.customerCode')">
              {{ goodsList.customerCode }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('goodsSKULang.warehouseOutDocNo')">
              {{ goodsList.orderNo }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('goodsSKULang.providerNo')">
              {{ goodsList.providerTrackingNo }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('goodsSKULang.provider')">
              {{ goodsList.provider }}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('goodsSKULang.providerChannel')">
              {{ goodsList.providerChannel }}
            </el-descriptions-item>
          </el-descriptions>
          <div v-if="isShowAutoPrint" style="text-align: center; margin-left: -50px; color: rgb(3, 185, 21); margin-bottom: 10px;">合箱完成，正在打印面单...</div>
          <el-form-item
            prop="providerNo"
            :label="$t('outboundOrderLang.providerNo')"
          >
            <el-input
              v-if="readonly === true"
              ref="input"
              v-model.lazy="queryParams.providerNo"
              :placeholder="
                $t('pleaseScan') + $t('outboundOrderLang.providerNo')
              "
              style="width: 50%"
              :disabled="providerNoDisabled"
              @keyup.enter.native="checkProviderTrackingNo"
            />
            <el-input
              v-else
              v-model.lazy="queryParams.providerNo"
              :placeholder="$t('pleaseEnter')"
              :readonly="readonly"
              style="width: 50%"
            />
            <el-button
              v-if="readonly === true"
              type="primary"
              round
              size="mini"
              style="position: absolute; margin-left: 5px"
              @click="changeToInputMode"
            >
              {{ $t("statusLang.changeToInputMode") }}</el-button>
            <el-button
              v-else
              type="primary"
              round
              size="mini"
              style="position: absolute; margin-left: 5px"
              @click="changeToScanMode"
            >
              {{ $t("statusLang.changeToScanMode") }}</el-button>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="start">
          <el-button
            type="primary"
            style="width: 20%; margin-left: 120px"
            @click="handleSubmit"
          >{{ $t("submit") }}</el-button>
          <el-button
            type="plain"
            style=""
            @click="goRegistration"
          >{{ $t("problemRegistration") }}</el-button>
        </el-row>
      </div>
    </div>
    <div class="uploadInfo" style="margin-top: 20px; padding: 0 10px 20px 50px">
      <el-row v-if="false" type="flex" justify="start">
        <el-button type="primary" @click="handleUpload">{{
          $t("upload")
        }}</el-button>
        <el-button type="warning" plain @click="deleteSelectItem">{{
          $t("delete")
        }}</el-button>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="6">
          <h3>{{ $t('outboundOrderLang.mergedList') }}</h3>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="uploadInfoData"
        tooltip-effect="dark"
        border
        class="mt-10"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" min-width="20" />
        <el-table-column
          :label="$t('tableIndex')"
          align="center"
          type="index"
          width="55"
        />
        <el-table-column
          :label="$t('outboundOrderLang.providerNo')"
          min-width="150"
          prop="providerTrackingNo"
          align="center"
        />
        <el-table-column
          prop="trackingNo"
          :label="$t('outboundOrderLang.logisticsDocumentNumber')"
          min-width="150"
          align="center"
        />
        <el-table-column
          :label="$t('outboundOrderLang.orderType')"
          prop="orderVoteTypeName"
          min-width="100"
          align="center"
        >
          <template />
        </el-table-column>
        <el-table-column
          :label="$t('goodsSKULang.skuNum')"
          prop="skuNum"
          align="center"
          min-width="80"
        />
        <el-table-column
          :label="$t('goodsSKULang.skuTotalNum')"
          prop="totalNum"
          align="center"
          min-width="80"
        />
        <el-table-column
          :label="$t('goodsSKULang.customerCode')"
          prop="customerCode"
          align="center"
          min-width="150"
        />
        <el-table-column
          :label="$t('goodsSKULang.operator')"
          prop="packUserName"
          align="center"
          min-width="150"
        />
        <el-table-column
          prop="packTime"
          :label="$t('operationDate')"
          min-width="80"
          align="center"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { packageTypeDict } from '@/utils/dictData'
import { getDictOptionList } from '@/utils/dictUtils'
import {
  setOutboundOrderStatusPack,
  packScanSiCode
} from '@/api/business/outboundManage/merge'
// import printJS from 'print-js'
import { printUrl } from '@/utils/print'
import { Message } from 'element-ui'
import { scanFail, scanSuccess } from '@/utils/validate'
export default {
  name: 'Merge',
  data() {
    return {
      userInfo: {
        userName: null,
        userId: null
      },
      orderIdList: [],
      readonly: true,
      skuDisabled: true,
      providerNoDisabled: true,
      goodsList: {
        customerCode: null, // 客户代码
        orderVoteType: null, // 订单类型
        pack: null, // 包材
        orderId: null,
        trackingNo: null,
        orderNo: null, // 出库单号
        providerTrackingNo: '', // 物流商单号
        provider: '', // 物流商
        providerChannel: '', // 物流渠道
        providerTrackingNoUrl: ''
      }, // 右侧数据
      queryParams: {
        originalBox: 0,
        providerTrackingNo: '', // 物流商单号
        trackingNo: null, // 物流单号
        containerCode: '',
        skuCode: null,
        skuNum: 0, // sku 入库数量
        scanList: [], // 扫描清单
        providerNo: null, // 二次扫描物流商单号
        siCode: null, // 拣货单号
        skuList: [],
        orderNo: null
      },
      tableData: [], // 客户信息数据
      uploadInfoData: [], // 上传
      data: [], // 操作成功
      multipleSelection: [], // el-table多选选中的值
      packageTypeDict: packageTypeDict,
      packageTypeOptions: getDictOptionList(packageTypeDict),
      isShowAutoPrint: false,
      currentOrderNo: '',
      curOrderId: '',
      orderList: []
    }
  },
  created() {
    // console.log(new Date().toLocaleString()); //当前时间
    this.userInfo = this.$store.state.user.userMsg
  },
  mounted() {
    this.$refs.inputSiCode.focus()
  },
  methods: {
    autoPrint(url) {
      printUrl(
        url,
        () => {
          Message({ message: this.$t('outboundOrderLang.printOK'), type: 'success', duration: 2 * 1000 })
          this.isShowAutoPrint = false
        },
        (err) => {
          Message({ message: err, type: 'error', duration: 5 * 1000 })
          this.isShowAutoPrint = false
        },
        () => {
          Message({ message: this.$t('outboundOrderLang.printerEmpty'), type: 'error', duration: 5 * 1000 })
          this.isShowAutoPrint = false
        }
      )
    },
    changeBox(val) {
      this.queryParams.originalBox = +val
    },
    // 扫描拣货单号
    getSiCode() {
      packScanSiCode({
        siCode: this.queryParams.siCode
      }).then(res => {
        scanSuccess()
        this.skuDisabled = false

        // data?.orderList?.forEach(item => this.$set(item, 'mergeStatus', 'N'))
        this.orderList = res.data?.orderList || []
        this.queryParams.scanList = this.orderList.filter(item => item.packStatus !== 'Y')
        this.uploadInfoData = this.orderList.filter(item => item.packStatus === 'Y')
        this.queryParams.skuCode = null
        this.queryParams.skuList = []
        this.goodsList.customerCode = ''
        this.goodsList.orderVoteType = ''
        this.goodsList.trackingNo = ''
        this.goodsList.orderNo = ''
        this.goodsList.providerTrackingNo = ''
        this.goodsList.provider = ''
        this.goodsList.providerChannel = ''
        this.queryParams.providerNo = ''
        if (this.queryParams.scanList?.length > 0) {
          this.$nextTick(() => {
            this.$refs.skuCode.focus()
          })
        }
      }).catch(() => {
        scanFail()
      })
    },
    // 扫描sku
    getSkuCodeInfo() {
      let skuInfo = {}
      const list = this.queryParams?.scanList?.filter(item => item.packStatus !== 'Y')
      if (this.queryParams.skuList?.length > 0) {
        skuInfo = this.queryParams.skuList.find(it => it.skuCode === this.queryParams.skuCode)
        const index = this.queryParams.skuList.findIndex(it => it.skuCode === this.queryParams.skuCode)
        if (!skuInfo) {
          this.$message({
            message: 'sku不匹配,请重新扫描',
            type: 'warning'
          })
          scanFail()
          return
        }

        if (this.goodsList.orderVoteType === '一票一件') {
          if (this.queryParams.skuList[index].goodsNum === this.queryParams.skuList[index].scanQty) { // 扫描数量与商品数量一致时
            this.providerNoDisabled = false
            this.$message.success('扫描数量与商品数量已经一致')
            this.$refs.skuCode.focus()
            scanFail()
          } else {
            this.queryParams.skuList[index].scanQty++
            scanSuccess()
            if (skuInfo.goodsNum === skuInfo.scanQty) {
              this.providerNoDisabled = false
              this.isShowAutoPrint = true
              this.printPdfFile(this.goodsList.providerTrackingNoUrl)
              this.$nextTick(() => {
                this.$refs.input.focus()
              })
            } else {
              this.$refs.skuCode.focus()
              this.providerNoDisabled = true
            }
          }
        } else {
          if (this.queryParams.skuList[index].goodsNum === this.queryParams.skuList[index].scanQty) { // 扫描数量与商品数量一致时
            this.providerNoDisabled = false
            this.$message.success('扫描数量与商品数量已经一致')
            scanFail()
          } else {
            this.queryParams.skuList[index].scanQty++
            scanSuccess()
          }
          const skuObj = this.queryParams.skuList?.find(item => item.goodsNum !== item.scanQty)
          if (skuObj?.skuCode) {
            this.$refs.skuCode.focus()
            this.providerNoDisabled = true
          } else {
            this.providerNoDisabled = false
            this.isShowAutoPrint = true
            this.printPdfFile(this.goodsList.providerTrackingNoUrl)
            this.$nextTick(() => {
              this.$refs.input.focus()
            })
          }
        }
        this.queryParams.skuCode = null
      } else {
        for (let i = 0; i < list?.length; i++) {
          let item = list[i]
          skuInfo = item?.outboundOrderPackageGoodsList.find(it => it.skuCode === this.queryParams.skuCode)
          if (this.currentOrderNo) {
            item = list.find(it => it.orderNo === this.currentOrderNo)
            skuInfo = item.outboundOrderPackageGoodsList?.find(it => it.skuCode === this.queryParams.skuCode)
          }
          if (skuInfo?.skuCode) {
            this.goodsList.customerCode = item.customerCode
            this.goodsList.orderVoteType = item.orderVoteTypeName
            this.goodsList.trackingNo = item.trackingNo
            this.goodsList.providerTrackingNo = item.providerTrackingNo
            this.goodsList.provider = item.providerName
            this.goodsList.providerChannel = item.providerChannelName
            this.goodsList.orderId = item.orderId
            this.goodsList.orderNo = item.orderNo
            this.goodsList.providerTrackingNoUrl = item.providerTrackingNoUrl
            const index = this.queryParams.skuList.findIndex(it => it.skuCode === this.queryParams.skuCode)
            if (item.orderVoteType === 0) {
              if (index >= 0) {
                if (this.queryParams.skuList[index].goodsNum === this.queryParams.skuList[index].scanQty) { // 扫描数量与商品数量一致时
                  this.providerNoDisabled = false
                  this.$message.success('扫描数量与商品数量已经一致')
                  this.$refs.skuCode.focus()
                  scanFail()
                } else {
                  this.queryParams.skuList[index].scanQty++
                  scanSuccess()
                  if (skuInfo.goodsNum === skuInfo.scanQty) {
                    this.providerNoDisabled = false
                    this.isShowAutoPrint = true
                    this.printPdfFile(item.providerTrackingNoUrl)
                    this.$nextTick(() => {
                      this.$refs.input.focus()
                    })
                  } else {
                    this.$refs.skuCode.focus()
                    this.providerNoDisabled = true
                  }
                }
              } else {
                this.queryParams.skuList = []
                this.$set(skuInfo, 'scanQty', 1)
                scanSuccess()
                if (skuInfo.goodsNum === skuInfo.scanQty) {
                  this.providerNoDisabled = false
                  this.isShowAutoPrint = true
                  this.printPdfFile(item.providerTrackingNoUrl)
                  this.$nextTick(() => {
                    this.$refs.input.focus()
                  })
                } else {
                  this.$refs.skuCode.focus()
                  this.queryParams.skuCode = null
                  this.providerNoDisabled = true
                }

                this.queryParams.skuCode = null
                this.queryParams.skuList.push(skuInfo)
              }
            } else {
              if (index >= 0) {
                if (this.queryParams.skuList[index].goodsNum === this.queryParams.skuList[index].scanQty) { // 扫描数量与商品数量一致时
                  this.providerNoDisabled = false
                  this.$message.success('扫描数量与商品数量已经一致')
                  scanFail()
                } else {
                  this.queryParams.skuList[index].scanQty++
                  scanSuccess()
                }
              } else {
                this.queryParams.skuList = []
                item?.outboundOrderPackageGoodsList?.forEach(item => this.$set(item, 'scanQty', 0))
                this.$set(skuInfo, 'scanQty', 1)
                scanSuccess()
                this.queryParams.skuList.push(...item?.outboundOrderPackageGoodsList)
              }
              const skuObj = this.queryParams.skuList?.find(item => item.goodsNum !== item.scanQty)
              if (skuObj?.skuCode) {
                this.$refs.skuCode.focus()
                this.providerNoDisabled = true
              } else {
                this.providerNoDisabled = false
                this.isShowAutoPrint = true
                this.printPdfFile(item.providerTrackingNoUrl)
                this.$nextTick(() => {
                  this.$refs.input.focus()
                })
              }

              this.queryParams.skuCode = null
            }
            break
          }
        }
        this.queryParams.skuCode = null
        if (!skuInfo?.skuCode) {
          this.$message({
            message: 'sku不匹配,请重新扫描',
            type: 'warning'
          })
          scanFail()
          return
        }
      }
    },
    // 二次校验物流商单号
    checkProviderTrackingNo() {
      if (this.queryParams.providerNo !== this.goodsList.providerTrackingNo) {
        this.$message({
          message: '物流商单号不匹配',
          type: 'warning'
        })
        scanFail()
      } else {
        scanSuccess()
        this.$message.success('校验成功')
        this.handleSubmit()
      }
    },
    // 提交
    async handleSubmit() {
      if (this.readonly === false) {
        if (this.queryParams.providerNo !== this.goodsList.providerTrackingNo) {
          this.$message({
            message: '物流商单号不匹配',
            type: 'warning'
          })
          return
        } else {
          // this.$message.success('校验成功')
        }
      }
      // const orderInfo = this.queryParams.scanList?.find(it => it.providerTrackingNo === this.queryParams.providerNo)
      // this.$set(orderInfo, 'packStatus', 'Y')
      const index = this.queryParams.scanList?.findIndex(it => it.providerTrackingNo === this.queryParams.providerNo)
      if (index < 0) {
        return
      }
      // 校验sku数量与扫描数量是否一致
      for (let i = 0; i < this.queryParams.skuList.length; i++) {
        const arr = this.queryParams.skuList[i]
        if (arr.scanQty !== arr.goodsNum) {
          this.$message({
            message: this.queryParams.skuCode + 'sku数量与扫描数量不一致',
            type: 'warning'
          })
          return
        } else {
        //   this.uploadInfoData.push({
        //     orderId: this.goodsList.orderId,
        //     providerTrackingNo: this.goodsList.providerTrackingNo,
        //     trackingNo: this.goodsList.trackingNo,
        //     orderVoteType: this.goodsList.orderVoteType,
        //     skuNum: arr.goodsNum,
        //     skuScanNum: arr.scanQty,
        //     customerCode: this.goodsList.customerCode,
        //     operator: this.userInfo.userName,
        //     operationDate: new Date().toLocaleString(),
        //     orderNo: this.queryParams.orderNo
        //   })
        }
      }

      setOutboundOrderStatusPack({
        orderIdList: [this.goodsList.orderId]
      }).then(() => {
        const curInfo = this.queryParams.scanList.splice(index, 1)
        const newData = Object.assign(...curInfo, {
          packUserName: this.userInfo.userName,
          packTime: new Date().toLocaleString()
        })

        this.uploadInfoData.push(newData)
        this.queryParams.skuCode = null
        this.queryParams.skuList = []
        this.goodsList.customerCode = ''
        this.goodsList.orderVoteType = ''
        this.goodsList.trackingNo = ''
        this.goodsList.orderNo = ''
        this.goodsList.providerTrackingNo = ''
        this.goodsList.provider = ''
        this.goodsList.providerChannel = ''
        this.queryParams.providerNo = ''
        this.$refs.skuCode.focus()
      }).catch(() => {
        // this.$message.success(this.$t('outboundOrderLang.failure'))
      })
    },
    goRegistration() {
      this.$router.push(`/problemItem?orderNo=${this.goodsList.orderNo}`)
    },
    // 上传
    async handleUpload() {
      this.orderIdList = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.map((item) => {
          return this.orderIdList.push(item.orderId)
        })
        await setOutboundOrderStatusPack({
          orderIdList: this.orderIdList
        })
        this.$message.success('上传成功')
        this.uploadInfoData = []
      } else {
        this.$message.error('请选择要上传的数据')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 删除
    deleteSelectItem() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: this.$t('pleaseSelect')
        })
        return
      }
      this.$confirm(this.$t('delete') + '?', this.$t('hint'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(() => {
          this.multipleSelection.forEach((value, index) => {
            this.uploadInfoData.forEach((v, i) => {
              if (
                value.providerTrackingNo === v.providerTrackingNo &&
                value.trackingNo === v.trackingNo &&
                value.orderVoteType === v.orderVoteType
              ) {
                const orderInfo = this.queryParams.scanList.find(item => item.providerTrackingNo === v.providerTrackingNo)
                this.$set(orderInfo, 'packStatus', 'N')
                this.uploadInfoData.splice(i, 1)
              }
            })
          })
          this.$message({
            type: 'success',
            message: this.$t('deleteSuccess')
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('cancel')
          })
        })
    },
    changeToInputMode() {
      this.readonly = !this.readonly
    },
    changeToScanMode() {
      this.readonly = !this.readonly
    },
    printPdfFile(fileUrl) {
      this.autoPrint(fileUrl)
      // setTimeout(() => {
      //   this.isShowAutoPrint = false
      // }, 3000)
      // printJS({
      //   printable: [fileUrl],
      //   type: 'pdf',
      //   scanStyles: false,
      //   // 其他可选的打印选项
      //   onLoadingEnd: () => {},
      //   onPrintDialogClose: () => {
      //     this.isShowAutoPrint = false
      //     this.queryParams.skuCode = null
      //   }
      // })
    },
    print(url) {
      fetch(url).then(res => {
        return res.blob() // 将url地址转化为blobd
      }).then(res => {
        var iframe = document.createElement('iframe')
        iframe.style.frameborder = 'no'
        iframe.style.display = 'none'
        iframe.style.pageBreakBefore = 'always'
        iframe.setAttribute('id', 'printPdf')
        iframe.setAttribute('name', 'printPdf')
        iframe.src = window.URL.createObjectURL(res) // 创建一个包含指定对象的URL
        document.body.appendChild(iframe)
        this.doPrint('printPdf')
        window.URL.revokeObjectURL(iframe.src) // 释放url
      })
    },
    doPrint(val) {
      var ordonnance = document.getElementById(val).contentWindow
      setTimeout(() => {
        ordonnance.print()
      }, 500)
    },
    rowClick(row) {
      this.curOrderId = row.orderId
      const item = row
      this.goodsList.customerCode = item.customerCode
      this.goodsList.orderVoteType = item.orderVoteTypeName
      this.goodsList.trackingNo = item.trackingNo
      this.goodsList.providerTrackingNo = item.providerTrackingNo
      this.goodsList.provider = item.providerName
      this.goodsList.providerChannel = item.providerChannelName
      this.goodsList.orderId = item.orderId
      this.goodsList.orderNo = item.orderNo
      this.goodsList.providerTrackingNoUrl = item.providerTrackingNoUrl
      this.queryParams.skuList = []
      this.currentOrderNo = item.orderNo
      this.readonly = true
      this.queryParams.providerNo = ''
      item?.outboundOrderPackageGoodsList?.forEach(item => this.$set(item, 'scanQty', 0))
      this.queryParams.skuList.push(...item?.outboundOrderPackageGoodsList)
      this.$refs.skuCode.focus()
    },
    resetGoodsList() {},
    rowStyle({ row }) {
      if (this.curOrderId === row.orderId) {
        return {
          'background-color': 'rgb(24, 144, 255, 0.5)', cursor: 'pointer'
        }
      }
      return { cursor: 'pointer' }
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsInfo {
  display: flex;
}
.active {
  color: red;
}
.el-input-scan {
  width: 40%;
  height: 36px;
  line-height: 36px;
  font-size: 16px;
  background-color: #f59a23;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 15px;
}
</style>

<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
